<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="js/layui/css/layui.css">
<!-- 		<link rel="stylesheet" type="text/css" href="css/main.css" /> -->
		<script src="js/jquery-1.10.2.min.js"></script>
		<script src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#main{
				width: 900px;
				height: 1120px;
				position: absolute;
				left: 50%;
				margin-left: -450px;
				border:1px solid #00F7DE; 
			}
			#maintitle{
				height: 50px;
				/* position: absolute; */
				left: 50px;
				text-align:center;
				
			}
			#maintitle label{
				line-height: 50px;
				font-family: "黑体";
				font-size: 28px;
				letter-spacing: 8px;
			}
			#sign{
				height: 40px;
			}
			#out{
				width: 800px;
				height: 1030px;
				position: absolute;
				left: 50px;
				top: 50px;
				border: 2px solid #000000;
			}
			#outmap{
				width: 100%;
				height:800px;
				background-image: url(img/map.png);
				background-size:100% 100%;
				background-repead:no-repead;
			}
			#info{
				width: 100%;
				position: absolute;
				left: 0px;
				top: 800px;
				bottom: 0px;
				border-top: 2px solid #000000; 
				font-size: 24px;
				letter-spacing: 20px;
				/*  */
			}
			#left_info{
				width: 60%;
				height:100%;
				border-right: 2px solid #000000;
				float: left;
			}
			#right_info{
				width: 40%;
				height:100%;
				position: absolute;
				left: 60%;
				float: left;
			}
			#title{
				width: 100%;
				height: 40px;
				border-bottom: 2px solid #000000;
				
			}
			.title{
				text-align:center;
			}
			.title label{
				line-height: 40px;
				font-family: "宋体";
				
			}
			#data{
				width: 60%;
				position: absolute;
				top: 40px;
				bottom: 0px;
			}
			#data1{
				width: 50%;
				height:100%; 
				float: left;
				border-right: 1px solid #777777;
			}
			#data2{
				width: 50%;
				height:100%;
				float: left;
				position: absolute;
				left: 50%;
				
			}
			.line_data{
				width:100%;
				height: 30px;
				font-size: 18px;
				letter-spacing: 0px;
				border-bottom:1px solid #777777;
			}
			
			.line_data label{
				width: 150px;
				line-height:30px;
			}
			.last{
				border-bottom:0px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div id="maintitle">
				<label>火箭作业点安全射界图</label>
			</div>
			<div id="out">
				<div id="outmap"></div>
				<div id="info">
					<div id="left_info">
						<div id="title" class="title">
							<label>安全射界范围</label>
						</div>
						<div id="data">
							<div id="data1">
								<div class="line_data" style="font-family: 宋体;">
									<label">编号</label>
									<label >方位角</label>
									<label >仰角</label>
								</div>
								<div class="line_data">
									<label">1</label>
									<label >75°~95°</label>
									<label >55°~85°</label>
								</div>
								<div class="line_data">
									<label">2</label>
									<label >75°~95°</label>
									<label >55°~85°</label>
								</div>
								<div class="line_data">
									<label">3</label>
									<label >75°~95°</label>
									<label >55°~85°</label>
								</div>
								<div class="line_data">
									<label">4</label>
									<label >75°~95°</label>
									<label >155°~185°</label>
								</div>
								<div  class="line_data last">
									<label">5</label>
									<label >75°~95°</label>
									<label >255°~285°</label>
								</div>
							</div>
							<div id="data2">
								<div class="line_data" style="font-family: 宋体;">
									<label">编号</label>
									<label >方位角</label>
									<label >仰角</label>
								</div>
								<div class="line_data">
									<label">6</label>
									<label ></label>
									<label ></label>
								</div>
								<div class="line_data">
									<label">7</label>
									<label ></label>
									<label ></label>
								</div>
								<div class="line_data">
									<label">8</label>
									<label ></label>
									<label ></label>
								</div>
								<div class="line_data">
									<label">9</label>
									<label ></label>
									<label ></label>
								</div>
								<div  class="line_data last">
									<label">10</label>
									<label ></label>
									<label ></label>
								</div>
							</div>
						</div>
					</div>
					<div id="right_info">
						<div id="title_2" class="title">
							<label>说明</label>
						</div>
						<div class="line_data last">
							<label">作业点名称：芒市-嘎中</label>
						</div>
						<div class="line_data last">
							<label">编   号：533103004</label>
						</div>
						<div class="line_data last">
							<label">坐   标：24°09′36″N 98°06′52″E </label>
						</div>
					</div>
				</div>
			</div>
			<div id="sign">
				
			</div>
		</div>
		
		<script type="text/javascript">
			/* var scode=getQueryVariable('scode');
			$.ajax({
				type: "get",
				url: "data/data1.json",
				async: true,
				dataType: 'json',
				cache: false,
				timeout: 30000,
				success: function(shootpoint) {
					var outmap = mapUtil.createGoogleMap('outmap', [shootpoint.lon, shootpoint.lat], 'sate', 9, 10, 21);
					var coord = ol.proj.transform([shootpoint.lon, shootpoint.lat], 'EPSG:4326', 'EPSG:3857');
					var jinsheLayer = new ol.layer.Vector({
						source: new ol.source.Vector()
					});
					outmap.addLayer(jinsheLayer);
					drawJinSheLayer(outmap,jinsheLayer,shootpoint); //绘制背景
					
					$.ajax({
						type: "get",
						url: "data/area1.json",
						async: true,
						dataType: 'json',
						cache: false,
						timeout: 30000,
						success: function(areaDatas) {
							var jinsheAreaLayer = new ol.layer.Vector({
								source: new ol.source.Vector()
							});
							outmap.addLayer(jinsheAreaLayer);
							jinsheAreaLayer.setZIndex(9999);
							
							$.each(areaDatas.data, function(i, data) {
								createAreaFea(jinsheAreaLayer,coord,data);
							})
						}
					})
					
					//drawjinsheArea(coord, scode); //绘制安全射区
				}
			})
			
			
			
			
			
			//获取参数
			function getQueryVariable(variable)
			{
			       var query = window.location.search.substring(1);
			       var vars = query.split("&");
			       for (var i=0;i<vars.length;i++) {
			               var pair = vars[i].split("=");
			               if(pair[0] == variable){return pair[1];}
			       }
			       return(false);
			} */
		</script>
	</body>
</html>
